<template>
    <div>
        <div class="center-box">
      <div class="pro-box">
        <div class="pro-top">
          <div class="cat">
            <span>分类</span>
            <div>
              <span @click="now=index" :class="{active:now == index}"
              v-for="(item,index) in family" :key="index">{{item}}</span>
              
            </div>
          </div>
          <div class="tag">
            <span>口味</span>
            <div>
              <span @click="news = index" :class="{acti:news==index}"
               v-for="(item,index) in taste" :key="index">{{item}}</span>
            </div>
          </div>
        </div>
        <div class="pro-bottom">
          <ul class="pro-list">

            <li v-for="(data,index) in data" :key="index">
              <div class="lazy">
                <div class="tit">
                  <span class="tit-text"></span>
                  <span class="tit-icon"></span>
                </div>
                <img
                  :src="`http://localhost:3000/${data.image}`"
                  alt=""
                />
              </div>

              <h3>{{data.name}}</h3>
              <span>¥{{data.price}}/908g({{data.spec}})</span>
              <div class="pro-cat">
                <span>新品&nbsp;></span>
              </div>
              <div class="cart">
                <img src="../assets/img/product/gouwuchetianjia.png">
                <span>加入购物车</span>
              </div>
            </li>
          
          </ul>
        </div>
      </div>
    </div>
    </div>
</template>

<script>
    export default {
      data() {
        return {
          family: ['全部分类','蛋糕','面包','冰激凌','下午茶','设计师礼品'],
          taste:['全部口味','乳脂奶油','慕斯','乳酪','巧克力',   '坚果',    '水果',  '咖啡', '冰淇淋', '应季'],
          data:'',
          now:3,
          news:0,
        }
      },
      watch:{
        now(){
          this.getData()
        }
      },
     methods: {
      getData() {
        if(!this.now==0){
           let url = `/pro/index?fid=${this.now}`
         this.axios.get(url).then(res =>{
          console.log(res);
          this.data = res.data.data
         })
        }else{
          let url = '/pro/products'
         this.axios.get(url).then(res =>{
          console.log(res);
          this.data = res.data.data
         })
        }
        
      }
     },
     mounted () {
      this.getData();
     },
    }
</script>
<style scoped src="../assets/css/product.css">

</style>
<style lang="scss" scoped>

</style>